/**
 * ui-utils.js - UI组件和交互功能
 * 包含提示消息、进度条和对话框等UI组件
 */

// 显示提示消息
function showToast(title, message, type) {
    // 创建或获取toast容器
    let toastContainer = $('#toastContainer');
    if (toastContainer.length === 0) {
        toastContainer = $('<div id="toastContainer" class="toast-container position-fixed bottom-0 end-0 p-3"></div>');
        $('body').append(toastContainer);
    }
    
    // 创建toast
    const toastId = 'toast-' + Date.now();
    const toast = $(`
        <div id="${toastId}" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header bg-${type} text-white">
                <strong class="me-auto">${title}</strong>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                ${message}
            </div>
        </div>
    `);
    
    toastContainer.append(toast);
    const toastElement = new bootstrap.Toast(document.getElementById(toastId), {
        autohide: true,
        delay: 3000
    });
    toastElement.show();
}

// 创建上传进度容器
function createUploadProgressContainer(totalFiles) {
    // 创建上传进度容器并立即添加到DOM中
    let progressContainer = $('#uploadProgressContainer');
    if (progressContainer.length === 0) {
        $('body').append('<div id="uploadProgressContainer" class="position-fixed top-50 start-50 translate-middle bg-white p-4 rounded shadow-lg" style="min-width: 300px; z-index:1060; display:none;"></div>');
        progressContainer = $('#uploadProgressContainer');
    }
    
    // 设置进度UI
    progressContainer.html(`
        <h5 class="mb-3">文件上传中</h5>
        <p class="mb-2">正在上传: <span id="currentFileName">准备中...</span></p>
        <div class="progress mb-3">
            <div class="progress-bar progress-bar-striped progress-bar-animated" 
                 role="progressbar" 
                 style="width: 0%" 
                 aria-valuenow="0" 
                 aria-valuemin="0" 
                 aria-valuemax="100">0%</div>
        </div>
        <div class="d-flex justify-content-between">
            <span>进度: <span id="uploadStats">0/${totalFiles}</span></span>
            <button id="cancelUploadBtn" class="btn btn-sm btn-outline-secondary">取消</button>
        </div>
    `);
    
    // 显示进度容器
    progressContainer.show();
    
    return progressContainer;
}

// 更新上传进度条
function updateProgress(completed, total) {
    try {
        const percent = Math.round((completed / total) * 100);
        const progressBar = $('#uploadProgressContainer .progress-bar');
        if (progressBar.length > 0) {
            progressBar.css('width', percent + '%')
                .attr('aria-valuenow', percent)
                .text(percent + '%');
        }
        
        $('#uploadStats').text(`${completed}/${total}`);
    } catch (e) {
        console.error('更新进度条错误:', e);
    }
}

// 显示确认对话框
function showConfirmDialog(dialogId, title, message, confirmCallback) {
    const modalId = dialogId || 'confirmDialog';
    
    // 检查对话框是否已存在，如果不存在则创建
    let modal = $(`#${modalId}`);
    if (modal.length === 0) {
        const modalHTML = `
            <div class="modal fade" id="${modalId}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">${title || '确认'}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p id="${modalId}Message">${message || ''}</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" id="${modalId}ConfirmBtn">确认</button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        $('body').append(modalHTML);
        modal = $(`#${modalId}`);
    } else {
        modal.find('.modal-title').text(title || '确认');
        modal.find(`#${modalId}Message`).text(message || '');
    }
    
    // 绑定确认回调
    $(`#${modalId}ConfirmBtn`).off('click').on('click', function() {
        if (typeof confirmCallback === 'function') {
            confirmCallback();
        }
        bootstrap.Modal.getInstance(document.getElementById(modalId)).hide();
    });
    
    // 显示对话框
    const modalInstance = new bootstrap.Modal(document.getElementById(modalId));
    modalInstance.show();
    
    return modalInstance;
} 